<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加节点</title>
    <script>
        function f1(){
            let a = document.getElementById("a");

            // 在超链接文本内容的后面添加一个div,且div的内容为这是一个div
            // 创建元素节点div
            let d = document.createElement("div");
            // 创建文本节点 这是一个div
            let text = document.createTextNode("这是一个div");

            // 将文本节点添加到元素节点的标签体的末尾
            d.appendChild(text);

            // 将创建的div添加到超链接的标签体的末尾
            // a.appendChild(d);

            // 将div添加到超链接之前
            let b = document.getElementById("b");
            // b.insertBefore(d,a);

            // 将div添加到超链接后面
            // b.appendChild(d);

            // 使用div替换原来的超链接
            b.replaceChild(d,a);
        }
    </script>
</head>
<body id="b">
<a href="javascript:;" onclick="f1()" id="a">超链接</a>
</body>
</html>